<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>组建的嵌套</title>
        <script type="text/javascript" src="../../js/vue.js"></script>
        <style>
            .demo{
                background-color: orange;
            }
        </style>
    </head>
    <body>
        <div id="root">
            <!-- 第三步：编写组件标签 -->
             <!-- 如果不想在这里写app组件，可以写在vm的template中 -->
             <!-- <app></app>  -->
            
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false //阻止生产提示

            //1.注意顺序，先创建student组件，在school组件内部
            const student = Vue.extend({
               name:'student',  //使用name配置项指定组件在开发中工具中显示的组件名称，如果没写就显示注册时的名称
               template:`
                <div>
                        <h2>学生名称：{{name}}</h2>
                        <h2>学生年龄：{{age}}</h2>
                </div>
               `,
               data(){
                return {
                    name:'张三',
                    age:18
                }
               }
            })

            //2.创建school组件，在school组件中局部注册student组件
            const school = Vue.extend({
               name:'school',  //使用name配置项指定组件在开发中工具中显示的组件名称，如果没写就显示注册时的名称
               template:`
                <div>
                        <h2>学校名称：{{schoolName}}</h2>
                        <h2>学校地址：{{address}}</h2>
                        <student></student>
                </div>
               `,
               data(){
                return {
                    schoolName:'上海一中',
                    address:'上海'
                }
               },
               components:{
                student
               }
            })

            //3.创建hello组件，和school平级
            const hello = Vue.extend({
                name:'hello',
                template:`
                    <h1>Hello!{{msg}}</h1>
                `,
                data(){
                    return{
                        msg:'TOM啊！'
                    }
                }
            })

            //定义app组件，在最上级，包含hello和school组件
            const app = Vue.extend({
                template:`
                    <div>
                        <hello></hello>
                        <school></school>
                    </div>
                `,
                components:{
                    hello,
                    school
                }
            })
            

            
            const vm =  new Vue({
                el:'#root',
                template:`<app></app>`,
                data:{
                    msg:'你好！'
                },
                components:{
                    app //在最外层的vm中，只需要注册app组件即可

                }
            })

        </script>

        
    </body>
</html>